<template>
	<view>
		<custom-header title="流水记录" />
		<view class="_wrap">
			<view class="date_wrap" @click="isShowDatetimePicker = true">
				<view class="date">
					<view class="icon">
						<image src="/static/common/calendar_icon.png" mode=""></image>
					</view>
					<view class="text">{{ selectDateTime }}</view>
					<view class="bottom_icon">
						<image src="/static/common/bottom1.png" mode=""></image>
					</view>
				</view>
				<view class="total">
					<view class="left">
						<view class="label">本月收入</view>
						<view class="value">
							<text class="integer">198.</text>
							<text class="decimal">00元</text>
						</view>
					</view>
					<view class="right">
						<view class="label">本月支出</view>
						<view class="value">
							<text class="integer">198.</text>
							<text class="decimal">00元</text>
						</view>
					</view>
				</view>
			</view>
			<view class="tabs_wrap">
				<view 
					class="list" 
					:class="tab == item.id?'active':''" 
					v-for="(item,index) in tabsList" 
					:key="index"
					@click="handleTab(item)">
					{{ item.name }}
				</view>
			</view>
			<scroll-view
				:scroll-y="true" 
				scroll-with-animation
				:style="{height:'calc(100vh - 240rpx - 80rpx - '+statusBarHeight+'px)'}"
				class="scroll_content_wrap">
					<view
						class="no_data" 
						v-if="!listData.length && listLoading != 'loading'">
							<view class="icon">
								<image src="https://goods-1312936761.cos.ap-chongqing.myqcloud.com/applet/supplier/my/nodata.png" mode=""></image>
							</view>
					</view>
					<view class="list_wrap" v-if="listData.length">
						<view 
							class="list" 
							v-for="(item,index) in listData" 
							:key="index"
							hover-class="custom_hover"
							:hover-stay-time="200"
							@click="handleDetail">
								<view class="name_price">
									<view class="name"> {{ item.name}} </view>
									<view class="price">
										<text v-if="item.status == 1" class="green">+{{ item.price }}元</text>
										<text v-else class="red">-{{ item.price }}元</text>
									</view>
								</view>
								<view class="createTime">{{ item.createTime }}</view>
								<view class="status">
									<text v-if="item.status == 1" class="green">已完成</text>
									<text v-else class="red">处理中</text>
								</view>
						</view>
					</view>
					<view class="loading_wrap" v-if="listLoading == 'loading'">
						<up-loadmore
							:status="listLoading"
							iconSize="22"
							iconColor="#FF3316"
							loadingIcon='semicircle'
							loadingText=""
							/>
					</view>
			</scroll-view>
		</view>
		<!-- 选择时间 -->
		<custom-select-time 
			:show="isShowDatetimePicker" 
			:defaultDate="selectDateTime"
			@close="isShowDatetimePicker = false" 
			@confirm="handleSelectTime"
			type="2">
		</custom-select-time>
	</view>
</template>

<script setup>
	import { ref,onMounted, computed } from 'vue'
	import { useStore } from 'vuex'
	const store = useStore()
	
	const statusBarHeight = computed(()=>{
		return store.getters.statusBarHeight
	})
	// 选择时间
	const isShowDatetimePicker = ref(false);
	const selectDateTime = ref('2025-4');
	const handleSelectTime = (e)=>{
		selectDateTime.value = e;
		loadGetListData();
	};
	// 选择类型
	const tab = ref(1)
	const tabsList = ref([
		{ id:1,name:'全部' },
		{ id:2,name:'收入' },
		{ id:3,name:'支出' }
	])
	// 选择tabs
	const handleTab = (e)=>{
		console.log(e)
		tab.value = e.id
		loadGetListData()
	}
	
	// 获取列表数据
	const listLoading = ref('loadmore')
	const listData = ref([]);
	const loadGetListData = ()=>{
		listData.value = []
		listLoading.value = 'loading'
		setTimeout(()=>{
			listData.value = [
				{
					
					id:1,
					name:'斌驰花卉订单',
					status:1,
					createTime:'2025-6-21 01:14:32',
					price:'158.00'
				},
				{
					
					id:1,
					name:'迟到扣款',
					status:1,
					createTime:'2025-6-21 01:14:32',
					price:'158.00'
				},
				{
					
					id:1,
					name:'斌驰花卉订单',
					status:2,
					createTime:'2025-6-21 01:14:32',
					price:'158.00'
				},
				{
					
					id:1,
					name:'斌驰花卉订单',
					status:2,
					createTime:'2025-6-21 01:14:32',
					price:'158.00'
				},
				{
					
					id:1,
					name:'斌驰花卉订单',
					status:2,
					createTime:'2025-6-21 01:14:32',
					price:'158.00'
				},
				{
					
					id:1,
					name:'斌驰花卉订单',
					status:2,
					createTime:'2025-6-21 01:14:32',
					price:'158.00'
				},
				{
					
					id:1,
					name:'斌驰花卉订单',
					status:2,
					createTime:'2025-6-21 01:14:32',
					price:'158.00'
				},
				{
					
					id:1,
					name:'斌驰花卉订单',
					status:2,
					createTime:'2025-6-21 01:14:32',
					price:'158.00'
				},
				{
					
					id:1,
					name:'斌驰花卉订单',
					status:2,
					createTime:'2025-6-21 01:14:32',
					price:'158.00'
				},
			]
			listLoading.value = 'loadmore'
		},1000);
	};
	const handleDetail = (item)=>{
		uni.navigateTo({
			url:'/pages/withholdRecordDetail/withholdRecordDetail?id='+item.id
		})
	}
	onMounted(()=>{
		loadGetListData()
	})
</script>

<style lang="scss">
	._wrap{
		padding: 0 25rpx;
	}
	.date_wrap{
		border-radius: 20rpx;
		background: #FFFFFF;
		margin-top: 25rpx;
		padding: 32rpx 0;
		.date{
			display: flex;
			align-items: center;
			justify-content: center;
			.icon{
				width: 28rpx;
				height: 28rpx;
				display: flex;
			}
			.text{
				font-size: 28rpx;
				color: #333;
				padding: 0 10rpx;
			}
			.bottom_icon{
				height: 11rpx;
				width: 20rpx;
				display: flex;
			}
		}
		.total{
			height: 80rpx;
			display: flex;
			margin-top: 30rpx;
			.left,.right{
				flex: 1;
				text-align: center;
				.label{
					font-size: 28rpx;
					color: #999999;
				}
				.value{
					font-weight: bold;
					color: #00AD82;
					padding-top: 10rpx;
					.integer{
						font-size: 36rpx;
					}
					.decimal{
						font-size: 28rpx;
					}
				}
			}
			.right{
				border-left: 2rpx solid #ECECEC;
				.value{
					color: #C60C0C;
				}
			}
		}
	}
	.tabs_wrap{
		display: flex;
		height: 80rpx;
		.list{
			flex: 1;
			text-align: center;
			padding: 20rpx 0;
			color: #999;
			font-size: 32rpx;
			position: relative;
			&.active{
				color: #333333;
				font-weight: bold;
				&::after{
					content: '';
					width: 28rpx;
					height: 8rpx;
					background: #FF3316;
					border-radius: 8rpx;
					position: absolute;
					bottom: 8rpx;
					left: 50%;
					margin-left: -14rpx;
				}
			}
		}
	}
	.list_wrap{
		.list{
			border-radius: 20rpx;
			background: #FFFFFF;
			padding: 25rpx;
			margin-top: 20rpx;
			.name_price{
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
			}
			.createTime{
				font-size: 24rpx;
				color: #999;
				padding: 10rpx 0;
			}
			.status{
				font-size: 24rpx;
			}
		}
	}
	.no_data{
		background: #fff;
		border-radius: 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 20rpx;
		height: calc(100% - 40rpx);
		.icon{
			width: 280rpx;
			height: 322rpx;
		}
	}
</style>
